<template>
  <div class="movie-detail" :style="{ background: getmoive.backgroundColor }">
    <div class="crumbs-nav">
      <a href="/">掌上电影</a>&nbsp;&gt;&nbsp;
      <span>{{ getmoive.nm }}</span>
    </div>
    <div class="synopsis">
      <div class="img1">
        <img :src="getimg" />
      </div>
      <div class="img2">
        <img
          src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/poster-play.png"
          alt=""
        />
      </div>
      <div class="syntext">
        <p class="p1">{{ getmoive.nm }}</p>
        <p class="p2">{{ getmoive.enm }}</p>
        <p class="p3">{{ getmoive.cat }}</p>
        <p class="p4">{{ getmoive.star }}</p>
        <p class="p5">{{ getmoive.pubDesc }} / {{ getmoive.episodeDur }}分钟</p>
        <div class="btn">
          想看
          <img
            src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/want-to-watch.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="score">
      <div class="top">
        <span>掌上影院评分</span>
        <span class="s1"
          >{{ getmoive.wish }}人想看 &nbsp; {{ getmoive.watched }}人看过</span
        >
      </div>
      <div class="fenshu">
        <p>
          {{ getmoive.sc }}<span>{{ getmoive.snum }}人评</span>
        </p>
        <van-rate
          v-model="sc"
          :size="25"
          color="#ffd21e"
          void-icon="star"
          void-color="#eee"
          allow-half
          readonly
        />
      </div>
    </div>
    <div>
      <div class="introduction">
        <div>简介</div>
        <div class="unfold" @click="changemsg">
          <template v-if="flag"> 展开 <van-icon name="arrow-down" /> </template>
          <template v-else> 收起 <van-icon name="arrow-up" /> </template>
        </div>
      </div>
      <div :class="['introduction1', flag ? 'van-multi-ellipsis--l3' : '']">
        {{ getmoive.dra }}
      </div>
    </div>
    <div class="Notice">
      <video
        class="videoPlay1"
        :src="getmoive.vd"
        width="100%"
        :poster="getmoive.videoImg"
        controls
      ></video>
    </div>
    <div class="Stills">
      <div class="top1">
        <span>剧照</span>
        <span>全部 ></span>
      </div>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, index) in getmoive.photos"
            :key="index"
          >
            <img :src="item | imgfmt(140, 93)" alt="" @click="showimg(index)" />
          </div>
        </div>
      </div>
    </div>
    <div class="mianze">
      <p class="content">
        <span>影视行业信息</span
        ><a
          href="https://i.maoyan.com/terms/private?id=privacy_1629962927685"
          class="link"
          data-event="http:__m.maoyan.com_terms_private?id=privacy_1629962927685"
          >《免责声明》</a
        ><span>I 违法和不良信息举报电话：400601890</span>
      </p>
    </div>
    <van-goods-action style="z-index: 999">
      <van-goods-action-icon icon="chat-o" text="转发" />
      <van-goods-action-button
        type="danger"
        text="特惠购票"
        @click="buyTicket(getmoive.id)"
      />
    </van-goods-action>
  </div>
</template>

<script>
import Swiper from "swiper"
import "swiper/dist/css/swiper.min.css"
import { getmovieDetail } from "../../api/movieDetail"
import { ImagePreview } from "vant"
export default {
  props: ["movieId"],
  data() {
    return {
      getmoive: {},
      flag: true,
      isflag: true,
      controls: "",
      sc: 0
    }
  },
  created() {
    this.getmoviedetails()
  },
  mounted() {
    this.swiper = new Swiper(".swiper-container", {
      // 轮播图swiper相关属性
      // autoplay: true
      slidesPerView: 2.5,
      spaceBetween: 10,
      freeMode: true,
      freeModeMomentumRatio: 1,
      observer: true, // 修改swiper自己或子元素时，自动初始化swiper
      observeParents: true // 修改swiper的父元素时，自动初始化swiper
    })
  },
  methods: {
    async getmoviedetails() {
      const res = await getmovieDetail(this.movieId)
      this.getmoive = res.data.data.detailMovie
      console.log(this.getmoive)
      this.sc = this.getmoive.sc / 2
    },
    changemsg() {
      if (this.flag) {
        this.flag = false
      } else {
        this.flag = true
      }
    },
    showimg(index) {
      const img1 = []
      this.getmoive.photos.forEach((item) => {
        img1.push(item.replace(/\/w.h\//, "/1000.1000/"))
      })
      ImagePreview({
        images: img1,
        startPosition: index
      })
    },
    buyTicket(id) {
      this.$router.push({
        path: `/cinemas/${id}`
      })
    }
  },
  computed: {
    getimg() {
      let img
      try {
        img = this.getmoive.img.replace(/\/w.h\//, "/100.200/")
      } catch (e) {
        console.log(111)
      }

      return img
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  margin: 0;
  padding: 0;
}
.movie-detail {
  background: #665929;
  box-sizing: border-box;
  padding: 15px;
  padding-top: 0;
  .crumbs-nav,
  .crumbs-nav a {
    color: #ccc;
    font-size: 14px;
    line-height: 50px;
  }
  .synopsis {
    display: flex;
    position: relative;
    overflow: hidden;
    .img1 {
      width: 103px;
      height: 142px;
      float: left;
      img {
        width: 103px;
        height: 142px;
      }
    }
    .img2 {
      width: 30px;
      height: 30px;
      position: absolute;
      top: 113px;
      left: -1px;
      img {
        width: 30px;
        height: 30px;
      }
    }
  }
  .syntext {
    float: left;
    color: #fff;
    opacity: 1;
    margin: -5px 0 0 10px;
    .p1 {
      font-size: 20px;
      font-weight: 800;
      color: #fff;
      opacity: 1;
    }
    .p2 {
      font-size: 12px;
      margin-top: 10px;
    }
    .p3 {
      font-size: 12px;
      margin-top: 5px;
    }
    .p4 {
      font-size: 12px;
      margin-top: 5px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      width: 230px;
    }
    .p5 {
      font-size: 12px;
      margin-top: 5px;
    }
    .btn {
      background: hsla(0, 0%, 100%, 0.35);
      text-align: center;
      line-height: 30px;
      border-radius: 5px;
      width: 140px;
      position: relative;
      margin-top: 5px;
      img {
        width: 15px;
        height: 15px;
        position: absolute;
        top: 7px;
        left: 36px;
      }
    }
  }
  .score {
    width: 100%;
    background: rgba(0, 0, 0, 0.18);
    margin-top: 10px;
    border-radius: 10px;
    padding: 8px;
    box-sizing: border-box;
    text-align: center;
    .top {
      color: #fff;
      font-size: 12px;
      overflow: hidden;
      padding: 0 5px;
      span {
        float: left;
      }
      .s1 {
        float: right;
        opacity: 0.6;
      }
    }
    .fenshu {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      width: 100%;
      height: 70px;
      text-align: center;
      p {
        // margin-left: 48%;
        text-align: center;
        color: #ffb400;
        font-size: 25px;
        font-weight: 800;
        font-family: MaoYanHeiTi-H-H;
        span {
          font-size: 12px;
          color: hsla(0, 0%, 100%, 0.4);
          display: block;
          text-align: center;
        }
      }
    }
  }
  .introduction {
    color: #fff;
    text-align: justify;
    margin-top: 15px;
    line-height: 28px;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
  }
  .introduction1 {
    color: #fff;
    text-align: justify;
    margin-top: 5px;
    line-height: 28px;
    font-size: 15px;
  }
  .Notice {
    margin-top: 10px;
    border-radius: 15px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .Stills {
    .top1 {
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      color: #fff;
      margin-top: 15px;
      span {
        display: block;
      }
    }
  }
  .swiper-container {
    margin-top: 10px;
    padding: 0 5px;
    box-sizing: border-box;
    .swiper-slide {
      width: 150px;
      height: 90px;
      img {
        width: 100%;
      }
    }
  }
  .mianze {
    font-size: 12px;
    text-align: center;
    margin: 25px 0;
    background: rgba($color: #ffffff, $alpha: 0.1);
    border-radius: 5px;
    a {
      color: skyblue;
    }
  }
}
</style>
